<template>
    <el-form ref="formRef" class="pl-3" :model="formData" label-width="80px" inline>
        <el-card class="!border-none flex flex-1 items-center justify-center" shadow="never">
            <div class=" w-[900px]">
                <div class=" text-lg	 mb-4">
                    物流基础信息
                </div>
                <div class="pl-3 grid grid-cols-2 whitespace-nowrap  ">
                    <div>
                        <el-form-item label="始发地" prop="origin"
                                      :rules="[{required: true, message:'始发地不可为空',trigger:'change'}]">
                            <el-input class="w-56" v-model="formData.origin" placeholder="请输入始发地"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="目的地" prop="destination"
                                      :rules="[{required: true, message:'目的地不可为空',trigger:'change'}]">
                            <el-input class="w-56" v-model="formData.destination" placeholder="请输入目的地"
                                      clearable/>
                        </el-form-item>
                    </div>
            
                    <div>
                        <el-form-item label="最低收费" prop="minimumCharge"
                                      :rules="[{ type: 'number', message: '最低收费金额必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.minimumCharge"
                                      placeholder="请输入最低收费"
                                      clearable/>
                        </el-form-item>
                    </div>
                </div>
            </div>
        </el-card>
        
        <el-card class="!border-none flex flex-1 items-center justify-center" shadow="never">
            <div class=" w-[900px]">
                <div class=" text-lg	 mb-4">
                    费用基本信息
                </div>
                <div class="pl-3 grid grid-cols-2 whitespace-nowrap  ">
                    <div>
                        <el-form-item label="收费方式" prop="chargingMethod"
                                      :rules="[{required: true, message:'收费方式不可为空',trigger:'change'}]">
                            <el-input class="w-56" v-model="formData.chargingMethod" placeholder="请输入收费方式"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="首重重量" prop="firstWeight"
                                      :rules="[{required: true, message:'首重重量不可为空',trigger:'change'},
                                              { type: 'number', message: '首重重量必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.firstWeight" placeholder="请输入首重重量"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="首重价格" prop="firstWeightPrice"
                                      :rules="[{required: true, message:'首重价格不可为空',trigger:'change'},
                                              { type: 'number', message: '首重价格必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.firstWeightPrice"
                                      placeholder="请输入首重价格"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        
                        <el-form-item label="起重重量" prop="initialWeight"
                                      :rules="[{ type: 'number', message: '起重重量必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.initialWeight" placeholder="请输入起重重量"
                                      clearable/>
                        </el-form-item>
                    </div>
                </div>
            </div>
        </el-card>
        
        
        <el-card class="!border-none flex flex-1 items-center justify-center" shadow="never">
            <div class=" w-[900px]">
                <div class=" text-lg	 mb-4">
                    区间费用信息
                </div>
                <div class="pl-3 grid grid-cols-2 whitespace-nowrap  ">
                    <div>
                        <el-form-item label="(1, 10] 区间收费" prop="weightRange1To10"
                                      :rules="[{ type: 'number', message: '(1, 10] 区间收费必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.weightRange1To10"
                                      placeholder="请输入(1, 10] 区间收费"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="(10, 30] 区间收费" prop="weightRange10To30"
                                      :rules="[{ type: 'number', message: '(10, 30] 区间收费必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.weightRange10To30"
                                      placeholder="请输入(10, 30] 区间收费"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="(30, 50] 区间收费" prop="weightRange30To50"
                                      :rules="[{ type: 'number', message: '(30, 50] 区间收费必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.weightRange30To50"
                                      placeholder="请输入(30, 50] 区间收费"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="(50, 100] 区间收费" prop="weightRange50To100"
                                      :rules="[{ type: 'number', message: '(50, 100] 区间收费必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.weightRange50To100"
                                      placeholder="请输入(50, 100] 区间收费"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="(100, 300] 区间收费" prop="weightRange100To300"
                                      :rules="[{ type: 'number', message: '(100, 300] 区间收费必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.weightRange100To300"
                                      placeholder="请输入(100, 300] 区间收费"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="(300, 500] 区间收费" prop="weightRange300To500"
                                      :rules="[{ type: 'number', message: '(300, 500] 区间收费必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.weightRange300To500"
                                      placeholder="请输入(300, 500] 区间收费"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="(500, 1000] 区间收费" prop="weightRange500To1000"
                                      :rules="[{ type: 'number', message: '(500, 1000] 区间收费必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.weightRange500To1000"
                                      placeholder="请输入(500, 1000] 区间收费"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="(1000, 2000] 区间收费" prop="weightRange1000To2000"
                                      :rules="[{ type: 'number', message: '(1000, 2000] 区间收费必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.weightRange1000To2000"
                                      placeholder="请输入(1000, 2000] 区间收费"
                                      clearable/>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="2000 以上区间收费" prop="weightOver2000"
                                      :rules="[{ type: 'number', message: '2000 以上区间收费必须是数字' }]">
                            <el-input class="w-56" v-model.number="formData.weightOver2000"
                                      placeholder="请输入2000 以上区间收费"
                                      clearable/>
                        </el-form-item>
                    </div>
                </div>
            </div>
        </el-card>
    </el-form>
    <footer-btns>
        <el-button type="primary" @click="handleSubmit">创建</el-button>
    </footer-btns>
</template>
<script lang="ts" setup>


import {ShallowRef, UnwrapNestedRefs} from "@vue/reactivity";
import {shallowRef} from "vue";
import {FormInstance} from "element-plus";
import useMultipleTabsManager from "@/manager/base/MultipleTabsManager";
import RouterManager from "@/manager/base/RouterManager";
import router from "@/base/router";
import CrmLogisticsChargeRequest from "@/api/logistics/request/CrmLogisticsChargeRequest";
import {createLogisticsCharge} from "@/api/logistics/CrmLogisticsChargeController";
import {useRoute} from "vue-router";

let formData: UnwrapNestedRefs<CrmLogisticsChargeRequest> = reactive(new CrmLogisticsChargeRequest());
const formRef: ShallowRef = shallowRef<FormInstance>()
let multipleTabsManager = useMultipleTabsManager();


function handleSubmit() {
    formRef.value?.validate().then(() => {
        createLogisticsCharge(formData).then(() => {
            multipleTabsManager.removeTab()
            
            let routePathByName = RouterManager.getRoutePathByName("logistics/client/corporation/index");
            console.log("routePathByName",routePathByName)
            if (routePathByName) {
                router.push({path: routePathByName, query: {activeTab: 'second'}})
            }
            
        })
    })
}

let route = useRoute();
watchEffect(() => {
    let watchEffect1 = watchEffect(() => {
        formData.corporationId = route.query?.corporationId as unknown as number
    });
})

</script>
